@font-face {
    font-family: 'HeaderFont';
    src: url('../../asset/styles/nameheader.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.container_home {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    // background-image: var(--backGroundImage);

    &::before {
        content: '';
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 20%;
        // background: linear-gradient(180deg, #FBE6A5 0%, rgba(251, 230, 165, 0) 100%);
        background: linear-gradient(to bottom,
                    rgba(166, 206, 255, 1),
                    rgba(251, 230, 165, 0),
                );
    }

    .that_header_mask {
        height: 7.12rem;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .that_team_intro {
        background-color: #fff;
        box-sizing: border-box;
        position: absolute;
        width: 9.2rem;
        // height: 3.33rem;
        top: 5.17rem;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 9999;
        box-shadow: 0rem 0.16rem 0.85rem -0.27rem rgba(0, 0, 0, 0.1);
        border-radius: 0.37rem;
        overflow: hidden;
        &>div {
            padding: .61rem .67rem;
            background: linear-gradient(90deg,  rgba(251, 230, 165, 0), rgba(166, 206, 255, 1));
            // background: linear-gradient(to bottom,
            //         rgba(166, 206, 255, 1),
            //         rgba(251, 230, 165, 0),
            //     );
    
            h3 {
                color: var(--buttonAndTitleColor) !important;
                font-size: 24px;
                line-height: .96rem;
                font-weight: 400;
                margin-bottom: .43rem;
                // font-family: 'HeaderFont';
                font-family: 'Rekeep Desired Demo-Regular';
            }
    
            div {
                color: var(--themeColor);
                font-size: .44rem;
                line-height: .56rem;
            }

        }
    }

    .that_main_wraper {
        margin-top: 2.19rem;
        display: flex;
        justify-content: space-around;

        li {
            display: flex;
            flex-direction: column;
            align-items: center;

            &>div:first-child {

                img {
                    width: 1.92rem;
                    height: 1.92rem;
                    object-fit: cover;
                }
            }

            &>div:last-child {
                text-align: center;
                font-weight: 400;
                font-size: .37rem;
                line-height: .53rem;
                color: var(--buttonAndTitleColor);
            }
        }
    }

    .that_banner_wraper {
        padding: 0 .43rem;
        margin: .8rem 0 2rem 0;

        .adm-swiper {
            border-radius: none !important;
        }

        h3 {
            font-size: 0.48rem;
            line-height: 0.96rem;
            font-weight: 700;
            margin-bottom: .16rem;
            color: var(--buttonAndTitleColor);
        }

        .adm-image {
            width: 6rem;
            height: 6rem;
        }

        .adm-image {
            border-radius: .16rem !important;
        }

        .adm-page-indicator-dot {
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 50%;
            margin-right: .11rem;
        }
    }

    .adm-tabs {
        flex: 1;
        border-bottom: none !important;
        position: relative;
        --active-line-color: none;

        .adm-tabs-header {
            z-index: 999;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            border-bottom: none !important;

            .adm-tabs-tab-list {
                background-color: #F3F3F3;
                // padding-top: .24rem;
            }

            .adm-tabs-tab-wrapper.adm-tabs-tab-wrapper-stretch {
                .adm-tabs-tab {
                    padding-top: 0 !important;

                    &>div {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        &::before {
                            margin-bottom: .16rem;
                            display: block;
                            content: '';
                            width: 100%;
                            height: 0.06rem;
                            background: #F3F3F3;
                        }
                    }

                    &.adm-tabs-tab-active {
                        &>div {
                            &::before {
                                background: var(--themeColor);
                            }

                            div {
                                color: var(--themeColor);
                            }
                        }
                    }
                }

                svg {
                    // color: var(--buttonAndTitleColor);
                    width: .64rem;
                    height: .64rem;
                }

                &>div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    div {
                        font-weight: 400;
                        font-size: .32rem;
                        line-height: 0.43rem;
                        color: #ADAFBB;
                    }
                }
            }
        }
    }

    .that_activity_list {
        padding: .43rem;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;

        .item_status {
            display: flex;
            align-items: center;

            font-weight: 400;
            font-size: 0.48rem;
            color: var(--themeColor);
            line-height: 0.72rem;
            margin: .4rem 0;

            &::before {
                content: '';
                display: block;
                height: .61rem;
                width: .19rem;
                margin-right: .24rem;
                background-color: var(--themeColor);
                border-radius: .11rem;
            }
        }


        .public_wraper {
            .act_type {
                // padding: .8rem 1.5rem .3rem 1.5rem;
                display: flex;
                justify-content: center;
                position: relative;

                .adm-image {
                    border-radius: .37rem .37rem 0 0;

                    img {
                        border-radius: .37rem .37rem 0 0;
                        height: 100%;
                    }
                }
            }

            h4 {
                font-weight: 400;
            }

            .join {
                box-sizing: border-box;
                flex-shrink: 0;
                width: 3.6rem;
                background: rgba(255, 148, 63, 0.05);
                border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
                border: 0.03rem solid var(--themeColor);
                font-weight: 400;
                font-size: 0.43rem;
                color: var(--themeColor);
                line-height: 0.56rem;
                text-align: center;
                padding: .3rem 0;
            }
        }

        .item_activity_waiting {
            position: relative;
            padding: .43rem;

            h4 {
                font-weight: 400;
                font-size: 0.43rem;
                color: #323755;
                line-height: 0.72rem;
            }

            .time,
            .place {
                font-weight: 400;
                font-size: 0.37rem;
                color: #999999;
                line-height: 0.72rem;
            }
        }
    }

    .that_tickets_list {
        padding: .4rem;
        margin-top: 1rem;
        margin-bottom: 2rem;

        li {
            position: relative;
            img {
                object-position: center;
            }
        }
    }

    .that_personal_wraper {
        background-repeat: no-repeat;
        // background-image: var(--corebBckground);
        background-position: center;
        background-size: cover;
        height: 5.15rem;

        .item_top {
            padding: 1.5rem .64rem 0 .64rem;

            .avatar {
                display: flex;
                align-items: center;
                margin-bottom: .8rem;

                .ant-image-tip {
                    border-radius: 50%;
                }

                .adm-image {
                    flex-shrink: 0;
                    border-radius: 50% !important;

                    .adm-image-img {
                        object-position: center center;
                    }
                }

                img {
                    border-radius: 50%;
                }

                .info {
                    flex: 1;
                    margin-left: .32rem;

                    .name {

                        display: flex;
                        align-items: center;

                        h4 {
                            font-weight: 700;
                            font-size: 0.48rem;
                            color: #323755;
                            line-height: 0.72rem;
                            display: -webkit-box;
                            overflow: hidden;
                            white-space: pre-line;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                        }

                        div {
                            flex-shrink: 0;
                            margin-left: .5rem;
                            background-size: 100% 100%;
                            height: .45rem;
                            width: .45rem;
                            background-image: url('../../asset/imgs/icon_edit.png');

                        }
                    }

                    div {
                        font-weight: 400;
                        font-size: 0.37rem;
                        color: var(--themeColor);
                        line-height: 0.48rem;
                    }
                }
            }

            .personal_account {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-weight: 400;
                margin: 0 0.05rem;

                &>div:first-child {
                    display: flex;
                    align-items: center;
                    font-size: 0.37rem;
                    color: var(--logoColor);
                    line-height: 0.72rem;
                }

                .to_shop {
                    text-align: center;
                    width: 2.59rem;
                    background: rgba(255, 148, 63, 0.05);
                    border-radius: 0.6rem;
                    border: 0.03rem solid var(--logoColor);
                    padding: .14rem 0;
                    font-weight: 400;
                    line-height: 0.56rem;
                    font-size: 0.37rem;
                    color: var(--logoColor);
                }
            }
        }

        .item_content {
            box-shadow: 0rem 0.05rem 0.32rem 0rem rgba(22, 52, 80, 0.1);
            border-radius: 0.37rem;
            margin: 1.07rem .4rem 0 .4rem;
            padding: .53rem;
            display: flex;
            justify-content: space-between;

            li {
                text-align: center;

                &>div:first-child {
                    height: 1.33rem;
                    width: 1.33rem;
                    margin-bottom: 0.19rem;

                    img {
                        height: 100%;
                        width: 100%;
                    }
                }

                &>div:last-child {
                    font-weight: 400;
                    font-size: 0.32rem;
                    color: #ADAFBB;
                    line-height: 0.43rem;
                    text-align: center;
                }
            }
        }

        .item_logout {
            position: absolute;
            bottom: 2.2rem;
            left: .64rem;
            right: .64rem;
            display: flex;

            button {
                flex: 1;
                padding: .43rem 0;
                font-size: 0.43rem;
                border-radius: 0.4rem;
                background-color: var(--themeColor);
                color: white;
                border: none;
                background:var(--themeColor);
            }
        }
    }

    .piblic_type {
        background-color: transparent;
        position: absolute;
        top: .18rem;
        right: -.09rem;
        height: 1rem;
        width: 1.5rem;

        div {
            text-align: center;
            height: 0.45rem;
            width: 2rem;
            font-size: 0.36rem;
            line-height: 0.45rem;
            color: #fff;
            transform: rotate(45deg);
            transform-origin: center center;

            &.tedian {
                background-color: #FF4E4D;
            }

            &.dianqie {
                background-color: #F27121
            }
        }
    }
}

.adm-popup {
    .adm-space {
        justify-content: normal !important;

        .adm-space-item {
            flex: 1;
        }
    }
}